<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js_属性操作</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: #05B2D2;
        }
    </style>
</head>
<body>
<div id="box"></div>
<input id='input1' type="text" value="请输入密码">
<hr>
<div>
    <button id="btn">通过innerHtml改变以下内容</button>
     <button id="btn1">还原</button>
<p id="txt">
    这是innerHtml准备替换的内容。
</p>
</div>

<script>
    var box=document.getElementById('box');
    var input1=document.getElementById('input1');
    var btn=document.getElementById('btn');
    var btn1=document.getElementById('btn1');

    console.log(input1.value);
    box.onclick=function () {
        box.style.cssText='width: 200px;height: 200px;background-color: green;';
         console.log(box.style.cssText);
    };

    btn.onclick=function () {
        txt.innerHTML='<h1 style="color: #ae81ff">我是替换后的innerHtml</h1>';

    }
    btn1.onclick
    console.log(btn.tagName);
    console.log(txt.tagName);
</script>
</body>
</html>